{include "INC_header.html"}
<div class="main-wrap">
    <main>
        <div class="container">
            <!-- 轮播图 -->
            <div class="index-swiper">
                <div class="inner">
                    <div class="swiper radius overflow-hidden">
                        <div class="swiper-wrapper">
                            {focus id="默认焦点图" item="pic"}
                            <div class="swiper-slide justify-center" style="background-color: #f9f9f9;"><img src="{$pic.picture}" style="max-width: 100%; margin: 0 auto;"></div>
                            {/focus}
                        </div>
                        <!-- 如果需要分页器 -->
                        <div class="swiper-pagination"></div>
                        <!-- 如果需要导航按钮 -->
                        <div class="swiper-button-prev"><i class="fa fa-arrow-left"></i></div>
                        <div class="swiper-button-next"><i class="fa fa-arrow-right"></i></div>
                    </div>
                    <script>
                        const mySwiper = new Swiper ('.swiper', {
                            loop: true, // 循环模式选项
                            autoplay: true,
                            delay: 5000,
                            effect: "fade",
                            // 如果需要分页器
                            pagination: {
                                el: '.swiper-pagination',
                            },
                            // 如果需要前进后退按钮
                            navigation: {
                                nextEl: '.swiper-button-next',
                                prevEl: '.swiper-button-prev',
                            }
                        });
                    </script>
                </div>
            </div>
            <!-- 推荐内容 -->
            <div class="panel-block padding-top">
                <div class="">
                    <h2 class="title">推荐阅读</h2>
                    {include "components/wavy.html"}
                </div>
            </div>
            <div class="recommend-view radius margin-top overflow-hidden ui flex-item light-background">
                <div class="start left-cards padding-top padding-start padding-bottom" style="width: 50%; padding-right: 0;">
                    {archiveList offset=0 total=1 tags="推荐" item="top"}
                    <div class="cards one-cards margin-top margin-start margin-bottom" style="padding: 0;">
                        <div class="card" style="margin: 0; width: 100%; overflow: hidden;">
                            <a href="{$top.url}" title="{$top.title}" class="preview radius overflow-hidden">
                                <div class="pic-4b3 hover-zoom">
                                    <div class="wrap" style="background: var(--background);">
                                        <img src="{$top.preview|default:CMS_randImage($top.title)}" alt="{$top.title}">
                                    </div>
                                </div>
                            </a>
                            <!--
                            <div class="ui flex-item medium-text padding-top">
                                <div class="avatar tiny circle text-small">
                                    <i class="fa fa-user"></i>
                                </div>
                                <div class="center justify-center padding-start">{$top.userNickname|default:'管理员'}</div>
                                <div class="end justify-center">{$top.datetime|date_format:"%Y/%m/%d"}</div>
                            </div>
                            -->
                            <div class="padding-top margin-top title">
                                <a class="text-bold text-large max-three-line-text" title="{$top.title}" href="{$top.url}">{$top.title}</a>
                            </div>
                            {if !empty($top.description)}
                            <div class="padding-top-half medium-text max-three-line-text line-height-20px">{$top.description}</div>
                            {/if}
                            <div class="padding-top ui flex-item">
                                <div class="center medium-text justify-center">{$top.datetime|date_format:"%Y/%m/%d"}</div>
                                <div class="end">
                                    {foreach $top.tagList as $tag}
                                    <a class="ui tag blue" href="/cms/tag/{$tag.tag}.html">#{$tag.tag}</a>
                                    {/foreach}
                                </div>
                            </div>
                        </div>
                    </div>
                    {/archiveList}
                </div>
                <div class="center">
                    <div class="list linear-split double-item-space">
                        {archiveList offset=1 total=4 tags="推荐" item="top2"}
                        <div class="item" style="border-left: none;">
                            <a href="{$top2.url}" title="{$top2.title}" class="start item-preview margin-right" style="width: 110px;">
                                <div class="pic-4b3 hover-zoom radius overflow-hidden medium-background">
                                    <div class="wrap"><img src="{$top2.preview|default:CMS_randImage($top2.title)}" alt="{$top2.title}"></div>
                                </div>
                            </a>
                            <div class="detail">
                                <a class="title text-large text-bold max-one-line-text" title="{$top2.title}" href="{$top2.url}">{$top2.title}</a>
                                {if !empty($top2.description)}
                                <div class="desc max-two-line-text medium-text margin-top-half line-height-16px">{$top2.description}</div>
                                {/if}
                                <div class="padding-top-half medium-text text-small">{$top2.datetime|date_format:"%Y/%m/%d"}</div>
                            </div>
                        </div>
                        {/archiveList}
                    </div>
                </div>
            </div>
            <!-- 卡片列表 -->
            <div class="panel-block padding-top">
                <div class="">
                    <h2 class="title">热门</h2>
                    {include "components/wavy.html"}
                </div>
            </div>
            <div class="radius overflow-hidden margin-top light-background">
                <div class="hot-view cards double-space">
                    {archiveList offset=0 total=4 tags="热门" item="card"}
                    <div class="card">
                        <a href="{$card.url}" title="{$card.title}" class="preview radius overflow-hidden">
                            <div class="pic-4b3 hover-zoom">
                                <div class="wrap">
                                    <img src="{$card.preview}" alt="{$card.title}">
                                </div>
                            </div>
                        </a>
                        <!--
                        <div class="ui flex-item medium-text padding-top">
                            <div class="avatar tiny text-small circle">
                                <i class="fa fa-user"></i>
                            </div>
                            <div class="center justify-center padding-start">{$card.userNickname|default:'管理员'}</div>
                            <div class="end justify-center">{$card.datetime|date_format:"%Y/%m/%d"}</div>
                        </div>
                        -->
                        <div class="padding-top margin-top title text-large">
                            <a class="text-bold max-one-line-text" href="{$card.url}" title="{$card.title}">{$card.title}</a>
                        </div>
                        <div class="desc margin-top-half medium-text max-three-line-text line-height-20px">{$card.description}</div>
                        <div class="padding-top ui flex-item">
                            <div class="center medium-text justify-center">{$card.datetime|date_format:"%Y/%m/%d"}</div>
                            <div class="end">
                                {foreach $card.tagList as $tag}
                                <a class="ui tag blue" href="/cms/tag/{$tag.tag}.html">#{$tag.tag}</a>
                                {/foreach}
                            </div>
                        </div>
                    </div>
                    {/archiveList}
                </div>
            </div>
            <!-- 常规列表 -->
            <div class="panel-block padding-top">
                <div class="">
                    <h2 class="title">最新发布</h2>
                    {include "components/wavy.html"}
                </div>
            </div>
            <div class="radius overflow-hidden margin-top light-background">
                <div class="list linear-split double-item-space" id="vue-outlet">
                    {archiveList offset=0 total=20 item="item"}
                    {include "INC_item.html" item=$item}
                    {/archiveList}
                    <!-- 加载更多 -->
                    {include "INC_item.html" type="ajax"}
                </div>
            </div>
            {include "INC_item_js.html"}
        </div>
        <!-- 右侧 -->
        {include "INC_aside.html"}
    </main>
</div>
{include "INC_footer.html"}